import React from 'react';
import { toJS } from 'mobx'
import { Tools, Icon, Button, Avatar, List, Popover } from 'weaver-mobile';
import { Upload, ListViewPage, Reply, CKTextarea, CKRichText, RouteLayout } from 'weaver-mobile-page';
import QueueAnim from 'rc-queue-anim';
import * as util from '../../../util'
import {openHrmCard} from '../../../util'
import { withRouter, Route } from 'react-router-dom';
import './index.less'
const getLabel = Tools.getLabel
//下部菜单
export const menuData = [ //菜单数据
    { path: '/planHome/planView/index?myReport', menuname: getLabel('6015','我的报告') },
    { path: '/planHome/planAudit', menuname: getLabel('505884','报告审批') },
    { path: '/planHome/planResult', menuname: getLabel (505885, '报告查询') },
];
//路由菜单
export const PLAN_VIEW_INDEX = '/planHome/planView/index'
export const PLAN_VIEW_LOG = '/planHome/planView/index'
export const PLAN_VIEW_FEEDBACK = '/planHome/planView/feedback'
export const PLAN_VIEW_NEW = '/planHome/planView/new'
export const PLAN_VIEW_ORG = '/planHome/planView/org'
export const PLAN_VIEW_DETAIL = '/planHome/planView/detail'
export const PLAN_VIEW_SHARE = '/planHome/planView/share'
export const PLAN_AUDIT = '/planHome/planAudit'
export const PLAN_RESULT = '/planHome/planResult'


//数据为空组件
export const Empty = ({ title = getLabel(83553, '暂无数据') }) => {
    return (
        <div className={"wea-workrelate-mobile-coms-empty"}>
            <div className={"wea-workrelate-mobile-coms-empty-body"}>
                {/* <Icon type="view" size="lg" style={{ display: 'block' }}></Icon> */}
                <div className={"wea-workrelate-mobile-coms-empty-title"}>{title}</div>
            </div>

        </div>
    )
}
//listviewpage组件构建条件
export const buildCondition = (inputType, fieldname, showname, ismust) => {
    let conditionType = ''
    switch (inputType) {
        case "1":
            conditionType = 'INPUT'
            break;
        case "4":
            conditionType = 'INPUTNUMBER'
            break;
        case "3":
            conditionType = 'DATEPICKER'
            break;
        case "2":
            conditionType = 'TEXTAREA'
            break;
        default:
            conditionType = 'INPUT'
            break;
    }
    return {
        "fieldcol": 12,
        "labelcol": 6,
        "colSpan": 2,
        "conditionType": conditionType,
        "formType": conditionType,
        "domkey": [fieldname],
        "isQuickSearch": false,
        "label": showname,
        "value": "",
        "viewAttr": ismust == 1 ? 3 : 2,
        "rules": ismust == 1 ? "required" : ''
    }
}

//附件上传组件
export const Files = ({ fileStore, files, maxsize, onChange, canedit, category,planid }) => {
    const prefixClass = 'workrelate-mobile-plan-planview-files-';
    return (
        <div className={`${prefixClass}container`}>
            {!canedit && files.length<1 && <Empty title={getLabel(83553, '暂无数据')}>
            </Empty>
            }
            
            <Upload
                uploadUrl={'/api/doc/upload/uploadFile2Doc?category=' + category}
                viewAttr={canedit ? 2 : 1}
                store={fileStore}
                datas={toJS(files)}
                editable={true}
                onChange={onChange}
                maxUploadSize={maxsize}
                // maxFilesNumber={16}
                // totalMaxUploadSize={300}
                showUploader={false}
                showUploadTime={false}
                onItemClick={(file, index, files) => {
                    util.opendoc(file.id,planid,4)
                }}
                onFileLoad={(file) => {
                    util.downloadsDoc(file.id, file.imagefileid, planid, 4)
                }}
            />
        </div>
    )
}
//工作总结和工作计划的卡片
export const PlanCard = ({ title = "标题", children }) => {

    const preCls = `wea-workrelate-mobile-plancard-`;
    return (
        <div className={`${preCls}container`}>
            <div className={`${preCls}header`}>
                <div>{title}</div>
            </div>
            <div className={`${preCls}content`}>
                {children}
            </div>
        </div>
    );
}

//操作日志
export const OperateLog = ({ logStore, handleRefresh, handleEndReached }) => {
    return (
        <ListViewPage.Normal
            getDataCustom={true}
            store={logStore}
            getTemplate={() => buildLogTemplate()}
            onRefresh={() => handleRefresh()}
            onEndReached={() => handleEndReached()}
        />
    )
}
//操作日志构建模板
const buildLogTemplate = (template) => {
    const prefixClass = 'workrelate-mobile-log-';
    return {
        default: [{
            key: 'id',
            render: (data) => (
                <div className={`${prefixClass}container`}>
                    <div className={`${prefixClass}log-view`}>
                        <div className={`${prefixClass}name-date`}>
                            <span className={`${prefixClass}name`}>
                                {data.operatorname}
                            </span>
                            <span className={`${prefixClass}date`}>
                                {data.operatedate}
                            </span>
                        </div>
                        <div className={`${prefixClass}operatetype`}>
                            {data.operatetype}
                        </div>
                    </div>
                </div>
            )
        }]
    }
}
//反馈信息
export const Feedback = ({ fbReplyStore, fbList, onSubmit }) => {
    const prefixClass = 'workrelate-mobile-plan-planview-feedback-';
    return (
        <div className={`${prefixClass}container`}>
            {fbList && fbList.map((f, i) => {
                return <QueueAnim delay={300} key={`ani${i}`}>
                    <div className={`${prefixClass}card`} key={`${i}`}>
                        <div className={`${prefixClass}card-header`}>
                            <div className={`${prefixClass}card-header-avator`}>
                                <Avatar
                                    url={f.hrmid}
                                />
                            </div>
                            <div className={`${prefixClass}card-header-text`}>
                                <div className={`${prefixClass}card-header-text-nickname`}>
                                    {f.hrmname}
                                </div>
                                <div className={`${prefixClass}card-header-text-dep`}>
                                    {f.dep}
                                </div>
                            </div>
                        </div>
                        <div className={`${prefixClass}card-content`} dangerouslySetInnerHTML={{ __html: f.content }}>
                            {/* {f.content} */}
                        </div>
                        <div className={`${prefixClass}card-footer`}>
                            <div className={`${prefixClass}card-footer-date`}>{f.datetime}</div>
                        </div>
                    </div>
                </QueueAnim>
            })}
            <Reply
                store={fbReplyStore}
                showOutInput
                onSubmit={onSubmit} // 提交的时候，如果需要清空数据，调用store的doClear方法
            />
        </div>
    )
}
//remark
export const Remark = ({ remark, remarkStore, remarkLayoutStore, onTextChange, iconClick, onOk, onCancel }) => {
    const prefixClass = 'workrelate-mobile-remark-';
    // let { remark, remarkStore, remarkLayout } = this.store;
    return (
        <div className={`${prefixClass}container`}>
            <div className={`${prefixClass}textarea`}>
                <div dangerouslySetInnerHTML={{ __html: remark }}></div>
            </div>
            <div className={`${prefixClass}iconarea`}>
                <Icon size={'md'} type='editor' onClick={() => iconClick()}></Icon>
            </div>

            <div>
                <Route
                    key={remarkLayoutStore.id}
                    path={remarkLayoutStore.path}
                    render={() => (
                        <RouteLayout>
                            <div
                                key="remark-layout"
                                className="wm-route-layout"
                            >
                                <div className={`${prefixClass}richtext`}>
                                    <CKRichText store={remarkStore}
                                        text={remark}
                                        onChange={(e) => { onTextChange(e) }}
                                        replyProps={{
                                            leftConfig: [{ type: 'voice' },
                                            { type: 'blog-biaoqing' },
                                            { type: 'blog-tupian' }]
                                        }}
                                    />
                                    <div className={`${prefixClass}buttonarea`}>
                                        <Button className={`${prefixClass}button`} onClick={() => onCancel()}>{getLabel(31129,'取消')}</Button>
                                        <Button className={`${prefixClass}button`} type="primary" onClick={() => onOk()}>{getLabel(826,'确定')}</Button>
                                    </div>

                                </div>

                            </div>
                        </RouteLayout>
                    )}
                />
            </div>

        </div>
    );
}

//空数据时添加按钮
export const EmptyAddButton = ({ onClick }) => {
    const prefixClass = 'workrelate-mobile-empty-add-button-';
    return <div className={`${prefixClass}container`}>
        <Button onClick={() => onClick()} className={`${prefixClass}button`} type="primary" inline>+</Button>
    </div>
}

//头部标题
export const TitleContainer = ({ title = '', enddate, showRight, planstatus,popover,auditList=[] }) => {
    const preClas = 'workrelate-mobile-header-title';
    let haveAuditList = auditList && auditList.length>0

    return <div className={`${preClas}`} >
        <div className={`${preClas}-left`}>
            <span className={`${preClas}-left-title`} >{title}</span>
            <div className={`${preClas}-left-info`} >
                <span className={`${preClas}-left-info-audits`} style={{display:(haveAuditList?'inline-block':'none')}}>{haveAuditList ? 
                    <span>
                        {getLabel('24743', '审批人')}：{
                            auditList.map(a=>{
                                return <a key={a.id} href='javaScript:void(0)' onClick={(e) => openHrmCard(a.id,e)}  style={{marginRight:'2px'}}>
                                            {a.name}
                                        </a>
                            })
                        }
                    </span>
                    :
                     ''}</span>
                <span className={`${preClas}-left-info-enddate`}>{enddate ? `${getLabel('22326','截止时间：')}：${enddate}` : ''}</span>
            </div>
        </div>
        {showRight && <div className={`${preClas}-right`}>
            <div>{planstatus}</div>
                {popover}
        </div>}
        
    </div>
}